<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>头部导航</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<link  href="${pageContext.request.contextPath}/app/css/style.css" rel="stylesheet"  type="text/css"/>
	<link  href="${pageContext.request.contextPath}/app/css/jquery.jcarousel.css" rel="stylesheet"  type="text/css"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/app/js/iepngfix_tilebg.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/app/js/jquery-1.2.3.pack.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/app/js/jquery.jcarousel.pack.js"></script>
<script>
function changeHeadWindow(type){
	    if(type=='max' || type=='expand'){
	    	 window.parent.document.getElementById("topFrameset").rows = "99,*,34";
			document.getElementById("top").style.display="";
			document.getElementById("topMin").style.display="none";

        }else if(type=='min'){
	    	window.parent.document.getElementById("topFrameset").rows = "27,*,34";
			document.getElementById("top").style.display="none";
			document.getElementById("topMin").style.display="";

	    }else if(type=='collapse'){
	    	window.parent.document.getElementById("topFrameset").rows = "55,*,33";
			document.getElementById("top").style.display="none";
			document.getElementById("topMin").style.display="none";
		
	    }
		jQuery(document).ready(function() {
			jQuery("#mycarouse2").jcarousel({
				scroll: 3,
				initCallback: mycarousel_initCallback,
				buttonNextHTML: null,
				buttonPrevHTML: null
			});
		});
	};
	function mycarousel_initCallback(carousel) {
	    $('.jcarousel-control a').bind('click', function() {
	        carousel.scroll($.jcarousel.intval($(this).text()));
	        return false;
	    });
	};
	
$(function(){
	$("#mycarousel").css("width",($("body").width()-400)+"px");
	$("#mycarouse2").find("a").click(function() {
		$("#mycarouse2").find("a").removeClass("hover");
		$(this).addClass("min_menu hover");
    });
	$("#mycarousel").find("a").click(function() {
		 var nav_id = $(this).attr('id');
         if($(this).attr('class') == 'hover')return;
         self.parent.frames["content"].frames["leftFrame"].location.href="main!initLeftMenu.do?nav_id="+nav_id;
		 $("#mycarousel").find("a").removeClass();
		 $(this).addClass("hover");
    });	
	
    $("#mycarousel").jcarousel({
        scroll: 3,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
    jQuery('#${nav_id}').addClass('hover');
    
    $("div.zhuxiao").click(function(){
    	$.ajax({
    		url : "login!logout.do",
    		method : "post",
    		success : function(data){
    			if(data == "1"){
    				top.location.href = "${pageContext.request.contextPath}/app/mainframe/login.jsp";
    			}
    		}
    	});
    });
   
});

</script>
  </head>
  <body>
    <div class="header" id="top">
		<div class="shousuoarrow_top" onClick="changeHeadWindow('min');"></div>
	    <div id="mycarousel" class="jcarousel-skin-tango "  >
		    <ul>
		      <c:if test="${not empty navCatalog}">
		         <c:forEach items="${navCatalog}" var="catalog" varStatus="index">
			         <li><a href="javascript:void(0)" id="${catalog.id}"><img src="${pageContext.request.contextPath}${catalog.menuImg}" width="32" height="32" /><span>${catalog.cnName}</span></a></li>
		         </c:forEach>
		      </c:if>
		    </ul>
	    </div>
	    
	    <div class="location">可以加入天气、时间等小功能，即时消息通信等也可以加入 <a title="加入常用功能项" class="add_function_ioce"></a></div>
		<div class="zhuxiao" >注销</div>
</div>

<div id="topMin"  style="display:none; font-size:1.2em;">
<div class="shousuoarrow_bottom" onClick="changeHeadWindow('max');"></div>
  <div class="location_min">可以加入天气、时间等小功能，即时消息通信等也可以加入 <a title="加入常用功能项" class="add_function_ioce"></a></div>
  <div class="zhuxiao" >注销</div>
</div>
  </body>
</html>
